<!--
 * @Author: C.
 * @Date: 2023-12-05 11:31:34
-->
<template>
  <view class="machine-bar" @click="toDetail">
    <view
      class="state"
      :style="{
        background: DeviceStateEnum.getItem(machine.DeviceState)?.color,
      }"
    />
    <view class="title">{{ machine.DeviceId }}</view>
    <view class="split-line">|</view>
    <view class="process-name">程序：{{ machine.Program_Name }}</view>
    <view class="more-icon">
      <t-Icon name="right" />
    </view>
  </view>
</template>
<script lang="ts" setup>
// ----------------------------- 第三方引入 -----------------------------
// import { ref } from 'vue'
// ----------------------------- hooks -----------------------------
import { useRouter } from '@/hooks/web/useRouter'
// ----------------------------- 组件 -----------------------------

// ----------------------------- 其他引入 -----------------------------
import { DeviceStateEnum } from '@/maps/device/DeviceStateEnum'
const props = defineProps({
  machine: {
    type: Object as PropType<Recordable>,
    default: () => {},
  },
})
//----------------------------- 变量声明区 -----------------------------

// ----------------------------- hooks使用区 -----------------------------
const { push } = useRouter()
// ----------------------------- 钩子函数区 -----------------------------

//  ----------------------------- 自定义方法区 -----------------------------
function toDetail() {
  push({
    url: `/pages/main/sub-pages/machine-detail/index?id=${props.machine.DeviceId}`,
  })
}
</script>
<style lang="scss" scoped>
.machine-bar {
  margin-top: 10rpx;
  width: 100%;

  /* background-color: #f8f8f8;
  box-shadow: 0rpx 2rpx 2rpx #ccc; */
  background: #ffffff;
  box-shadow: inset 20px 20px 60px #e7e7e7, inset -20px -20px 60px #ffffff;
  height: 70rpx;
  border-radius: 40rpx;
  /* line-height: 70rpx; */
  display: flex;
  align-items: center;
  padding: 0 15rpx;
  position: relative;
  .state {
    background-color: #00d05e;
    border-radius: 100%;
    width: 30rpx;
    height: 30rpx;
  }
  .title {
    margin-left: 15rpx;
    font-weight: bold;
    width: 150rpx;
  }
  .split-line {
    color: #ccc;
    padding: 0 20rpx;
  }
  .process-name {
  }
  .more-icon {
    position: absolute;
    right: 15rpx;
    top: 20rpx;
  }
}
</style>
